<template>
  <div class="edit_wrap">
    <quill-editor
      v-model="content"
      ref="quillEditor"
      :options="editorOption"
      @blur="onBlur($event)"
      @focus="onFocus($event)"
      @change="onChange($event)"
    >
    </quill-editor>
    <!-- data-placeholder="Insert text here ..." -->
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      content: "",
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            [{ list: "ordered" }, { list: "bullet" }], //列表
            ["blockquote", "code-block"], //引用，代码块
            ["image"], //上传图片、上传视频
          ],
        },
        theme: "snow",
      },
    };
  },
  props: {
    articleBody: {
      required: true,
    },
  },
  components: {},
  mounted() {},
  computed: {},
  // beforeUpdate() {
  //   // this.content = this.articleBody;
  //   console.log(this.articleBody === undefined);
  // },
  methods: {
    // getsmallData() {
    //   this.content = this.articleBody;
    // },
    changeUpload() {},
    onBlur() {
      let str = this.content.replace(/<.*?>/gi, "");
      //   console.log();
      //   str = str.replace(/<.*?>/gi, "");
      this.$emit("getArtBody", str);
    }, // 失去焦点事件
    onFocus() {}, // 获得焦点事件
    onChange() {}, // 内容改变事件
  },
};
</script>

<style scoped>
.quill-editor {
  height: 200px;
}
.el-form-item__label {
  width: 90px;
}
/* .ql-container[data-v-0242fa64] {
  display: inline-block;
  height: 200px;
} */
</style>

